<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
        <!-- 
        v-model:value  v-model
         -->
        姓：<input type="text" v-model:value="lastName"><br>
        名：<input type="text" v-model="firstName"><br>
        <!-- 
            如果要截取0、1、2位  lastName.slice(0,3)
            更复杂的很难做到，比如再来点反转，再筛选，再根据结果算出值等等
        -->
        姓名：<span>{{lastName.slice(0,3)}}{{firstName}}</span>
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false;
      const vm = new Vue({
        data: {
          lastName: "张",
          firstName: "三",
        },
      });
      vm.$mount("#root");
    </script>
  </body>
</html>
